<template>
  <!--  评论开始  -->
  <div class="card">
    <h2 style="margin-bottom: 20px">评论 {{ commentCount }}</h2>
    <el-input
      type="textarea"
      placeholder="请输入评论内容"
      v-model="commentContent"
    ></el-input>
    <div style="text-align: right; margin-top: 5px">
      <el-button type="primary" @click="addComment()">评论</el-button>
    </div>
    <div
      style="display: flex; grid-gap: 20px; margin-bottom: 10px"
      v-for="item in commentList"
      :key="item.commentId"
    >
      <el-image style="width: 50px; height:50px;border-radius: 50%" :src="item.avatar" :preview-src-list="[item.avatar]" />
      <div style="flex: 1">
        <!-- 一级评论 -->
        <div style="margin-bottom: 0px">
          <div style="color: #666; margin-bottom: 8px">
            {{ item.username }}
          </div>
          <div style="color: #444; margin-bottom: 8px">
            {{ item.postComment }}
          </div>
          <div style="color: #888; font-size: 13px; margin-bottom: 8px">
            <span style="margin-right: 20px">{{ item.commentDate }}</span>
            <span
              style="cursor: pointer"
              :class="{ 'comment-active': item.showReplyInput }"
              @click="handleShowReplyInput(item)"
              ><i class="el-icon-s-comment"></i>评论</span
            >
            <span style="margin-left: 20px; cursor: pointer" @click="del(item.commentId)" v-if="item.userId === user.userId"><i class="el-icon-delete"></i>删除</span>
            
          </div>
          <div v-if="item.showReplyInput">
            <el-input
              type="textarea"
              placeholder="请输入回复的内容"
              v-model="item.commentReplayContent"
            ></el-input>
            <div style="text-align: right; margin-top: 5px">
              <el-button type="primary" @click="addReplayComment(item)"
                >评论</el-button
              >
            </div>
          </div>
        </div>
        <!-- 二级 -->
        <div
          style="display: flex; grid-gap: 20px; margin-bottom: 8px"
          v-for="sub in item.children"
          :key="sub.commentId"
        >
          <img
            :src="sub.avatar"
            alt=""
            style="width: 50px; height: 50px; border-radius: 50%"
          />
          <div style="flex: 1">
            <div style="color: #666; margin-bottom: 8px">
              {{ sub.username }}
              <span style="color: #333" v-if="sub.replyUser !== sub.username"
                >回复 {{ sub.replyUser }}</span
              >
            </div>
            <div style="color: #444; margin-bottom: 8px">
              {{ sub.postComment }}
            </div>
            <div style="color: #888; font-size: 13px;margin-bottom: 8px;">
              <span style="margin-right: 20px;" >{{ sub.commentDate }}</span>
              <span
                style="cursor: pointer"
                :class="{ 'comment-active': sub.showReplyInput }"
                @click="handleShowReplyInput(sub)"
                ><i class="el-icon-s-comment"></i>评论</span
              >
              <span style="margin-left: 20px; cursor: pointer" @click="del(sub.commentId)" v-if="sub.userId === user.userId"><i class="el-icon-delete"></i>删除</span>
            </div>
            <div v-if="sub.showReplyInput">
              <el-input
                type="textarea"
                placeholder="请输入回复的内容"
                v-model="sub.commentReplayContent"
              ></el-input>
              <div style="text-align: right; margin-top: 5px">
                <el-button type="primary" @click="addReplayComment(sub)"
                  >评论</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//请求
import request from "@/utils/request";
export default {
  name: "CommentComponent",
  props: {
    postId: null,
  },
  data() {
    return {
      //评论数量
      commentCount: "",
      //评论框内容
      commentContent: "",
      //展示当前帖子所有评论
      commentList: "",
      user:JSON.parse(sessionStorage.getItem("user")),
    };
  },
  created() {
    this.loadComment();
  },
  methods: {
    //处理是否展示回复框
    handleShowReplyInput(item) {
      item.showReplyInput = !item.showReplyInput;
    },
    //加载评论
    loadComment() {
      request.get("/comment/selectForUser/" + this.postId).then((res) => {
        this.commentList = res.data || [];
      });
      request.get("/comment/selectCount/" + this.postId).then((res) => {
        this.commentCount = res.data;
      });
    },
    //添加评论
    addComment() {
      request
        .post("/comment/userAddComment", {
          postComment: this.commentContent,
          postId: this.postId,
        })
        .then((res) => {
          if (res.code === 0) {
            this.$message.success("操作成功");
            this.commentContent = "";
            this.loadComment(); // 重新加载数据
          }
        });
    },
    //添加回复
    addReplayComment(item) {
      request
        .post("/comment/userAddComment", {
          fatherCommentId: item.commentId,
          commentRootId: item.commentRootId,
          postComment: item.commentReplayContent,
          postId: this.postId,
        })
        .then((res) => {
          if (res.code === 0) {
            this.$message.success("操作成功");
            item.commentReplayContent = "";
            this.loadComment(); // 重新加载数据
          }
        });
    },
    //删除评论
    del(id) {   // 单个删除
      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
        request.delete('/comment/delete/' + id).then(res => {
          if (res.code === 0) {   // 表示操作成功
            this.$message.success('操作成功')
            this.loadComment()
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
  },
};
</script>

<style scoped>
.comment-active {
  color: #1890ff;
}
</style>
